<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>持箱人管理</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div id="takeoutMain">
      <a-button type="primary" @click="createHolder">+ 创建持箱人</a-button>
      <a-table
        :columns="columns"
        :loading="loading"
        :data-source="data"
        style="margin-top:25px;"
        :pagination="pagination"
        :row-key="record => record.id"
      >
        <span slot="status" slot-scope="record" :style="'display: flex; align-items: center;'">
          <template v-if="record.status === 1">
            <span class="green"></span>
            <span>正常</span>
          </template>
          <template v-else>
            <span class="red"></span>
            <span>冻结</span>
          </template>
        </span>
        <a slot="do" slot-scope="record" @click="doSomething(record)">
          <template v-if="record.status === 1">冻结</template>
          <template v-else>恢复</template>
        </a>
      </a-table>
    </div>
    <a-modal
      v-model="visible"
      title="创建持箱人"
      :body-style="{padding:'40px 40px 20px 20px'}"
      :width="650"
      centered
      :confirmLoading="createStatus"
      @ok="addHolder"
      destroyOnClose
    >
      <a-form-model
        ref="form"
        :rules="rules"
        :model="form"
        :label-col="{span:6}"
        :wrapper-col="{span:15}"
      >
        <!-- 持箱人简称 -->
        <a-form-model-item label="持箱人简称" prop="shortName">
          <a-input type="text" v-model="form.shortName" />
        </a-form-model-item>
        <!-- 持箱人全称 -->
        <a-form-model-item label="持箱人全称" prop="name">
          <a-input type="text" v-model="form.name" />
        </a-form-model-item>
        <!-- 空箱用箱期 -->
        <a-form-model-item label="空箱用箱期">
          <!-- <a-input type="text" v-model="form.emptyLimitDay" /> -->
          <a-input-number
            :min="0"
            :max="99"
            :precision="0"
            v-model="form.emptyLimitDay"
            style="width:100%"
          />
        </a-form-model-item>
        <!-- 重箱用箱期 -->
        <a-form-model-item label="重箱用箱期">
          <!-- <a-input type="text" v-model="form.heavyLimitDay" /> -->
          <a-input-number
            :min="0"
            :max="99"
            :precision="0"
            v-model="form.heavyLimitDay"
            style="width:100%"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
import {
  queryOrderInfoList,
  addContainerHolder,
  editContainerHolder
} from '@/api/boxManagementCenter'

const fomrMessage = `必填项不能为空`
const columns = [
  {
    title: '序号',
    width: 80,
    customRender: (text, record, index) => {
      return index + 1
    }
  },
  {
    title: '持箱人简称',
    dataIndex: 'shortName'
  },
  {
    title: '持箱人全称',
    dataIndex: 'name'
  },
  {
    title: '空箱用箱期',
    customRender: (text, record, index) => {
      return record.emptyLimitDay ? record.emptyLimitDay : '--'
    }
  },
  {
    title: '重箱用箱期',
    customRender: (text, record, index) => {
      return record.heavyLimitDay ? record.heavyLimitDay : '--'
    }
  },
  {
    title: '状态',
    key: 'stauts',
    scopedSlots: {
      customRender: 'status'
    }
  },
  {
    title: '操作',
    key: 'do',
    scopedSlots: {
      customRender: 'do'
    }
  }
]
export default {
  data () {
    return {
      pageNum: 1,
      pageSize: 10,
      loading: true,
      data: [],
      columns,
      pagination: {},
      visible: false,
      form: {
        name: '', // 全称
        shortName: '', // 简称
        emptyLimitDay: '', // 空箱用箱期
        heavyLimitDay: '' // 重箱用箱期
      },
      rules: {
        name: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        shortName: [{ required: true, message: fomrMessage, trigger: 'blur' }]
      },
      btnControl: {},
      createStatus: false
    }
  },
  methods: {
    orderListRequest (paramData) {
      this.loading = true
      queryOrderInfoList(paramData)
        .then(res => {
          // console.log(res)
          this.data = res.data.list
          let currentPage = this.pageNum
          this.pagination = {
            current: currentPage,
            pageSize: res.data.pageSize,
            total: res.data.total,
            showQuickJumper: false,
            showSizeChanger: true,
            showTotal: total =>
              `共${total}条记录 第${currentPage}/${res.data.pages}页`,
            onChange: pageNum => {
              this.pageNum = pageNum
              let paramData = {
                pageSize: this.pageSize,
                pageNum: this.pageNum
              }
              this.orderListRequest(paramData)
            },
            onShowSizeChange: (current, size) => {
              this.pageNum = current
              this.pageSize = size
              let paramData = {
                pageSize: this.pageSize,
                pageNum: this.pageNum
              }
              this.orderListRequest(paramData)
            }
          }
          this.loading = false
        })
        .catch(rs => {})
    },
    changeHolderRequest (param) {
      editContainerHolder(param)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('修改成功！')
            this.pageNum = 1
            let paramData = {
              pageSize: this.pageSize,
              pageNum: this.pageNum
            }
            this.orderListRequest(paramData)
          }
        })
        .catch(rs => {})
    },
    addHolderRequest (e) {
      this.createStatus = true
      addContainerHolder(e)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('创建成功！')
            this.pageNum = 1
            let paramData = {
              pageSize: this.pageSize,
              pageNum: this.pageNum
            }
            this.orderListRequest(paramData)
            setTimeout(() => {
              this.visible = false
              this.createStatus = false
            }, 100)
          }
        })
        .catch(rs => {
          this.createStatus = false
        })
    },
    doSomething (e) {
      // // console.log(e)
      if (!this.btnControl.frozen) {
        this.$message.error('您无此权限！')
        return false
      }
      let _s = this
      if (e.status === 1) {
        _s.$confirm({
          content:
            '持箱人冻结后，将无法被新的集装箱使用，已经使用的不受影响，确认冻结？',
          onOk () {
            _s.changeHolderRequest({
              id: e.id,
              status: e.status ? 0 : 1
            })
          },
          onCancel () {}
        })
      } else {
        _s.changeHolderRequest({
          id: e.id,
          status: e.status ? 0 : 1
        })
      }
    },
    createHolder () {
      if (!this.btnControl.create) {
        this.$message.error('您无此权限！')
        return false
      }
      this.form = {
        name: '', // 全称
        shortName: '', // 简称
        emptyLimitDay: '', // 空箱用箱期
        heavyLimitDay: '' // 重箱用箱期
      }
      this.visible = true
    },
    addHolder () {
      let _s = this
      // if (!_s.createStatus) {
      //   _s.$message.error('请勿重复提交！')
      //   return false
      // }
      _s.$refs.form.validate(valid => {
        if (valid) {
          _s.addHolderRequest({
            ..._s.form
          })
        }
      })
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.btnControl = this.$root._bc
      // console.log(this.$root._bc)
    })
    this.orderListRequest({
      pageSize: this.pageSize,
      pageNum: this.pageNum
    })
  }
}
</script>
<style lang="less" scoped>
#takeoutMain {
  padding: 24px;
  margin: 24px;
  background: #fff;
  min-height: 700px;
  .green {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #00a854;
    margin-right: 5px;
  }
  .red {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f04134;
    margin-right: 5px;
  }
}
</style>
